<template>
	<view class="company">

		<view>
			<u-form :model="form" ref="uForm">
				<view class="title">
					公司注册文件*
				</view>
				<view class="form_box">
					<u-form-item label="公司名称" label-width='auto' prop="companyName">
						<u-input v-model="form.companyName" />
					</u-form-item>
					<u-form-item label="注册号" label-width='auto' prop="companyNum">
						<u-input v-model="form.companyNum" />
					</u-form-item>
					<u-form-item label-width='auto'>
						<!-- <hyUpload :defaultUrl='form.companyImg' @onSuccess='(res)=>onSuccessUpload(res,"companyImg")'></hyUpload> -->
						<hyFileUpload :defaultUrls='form.companyImg' @handSuccessFilsList='(res)=>onSuccessFilsList(res,"companyImg")'></hyFileUpload>
					</u-form-item>
				</view>
				<view class="title">
					营业执照
				</view>
				<view class="form_box">
					<u-form-item label="营业编号" label-width='auto' prop="businessNum">
						<u-input v-model="form.businessNum" />
					</u-form-item>

					<u-form-item label-width='auto'>
						<!-- <hyUpload :defaultUrl='form.businessImg' @onSuccess='(res)=>onSuccessUpload(res,"businessImg")'></hyUpload> -->
						<hyFileUpload :defaultUrls='form.businessImg' @handSuccessFilsList='(res)=>onSuccessFilsList(res,"businessImg")'></hyFileUpload>
					</u-form-item>
				</view>
				<view class="title">
					地址说明*（银行流水，账单或租约等）
				</view>
				<view class="form_box">
					<u-form-item label="公司地址" label-width='auto' prop="companyAddress">
						<u-input v-model="form.companyAddress" />
					</u-form-item>

					<u-form-item label-width='auto'>
						<!-- <hyUpload :defaultUrl='form.addressImg' @onSuccess='(res)=>onSuccessUpload(res,"addressImg")'></hyUpload> -->
						<hyFileUpload :defaultUrls='form.addressImg' @handSuccessFilsList='(res)=>onSuccessFilsList(res,"addressImg")'></hyFileUpload>
					</u-form-item>
				</view>
				<view class="title">
					公司简介
				</view>
				<view class="form_box">
					<u-form-item label-width='auto'>
						<u-input v-model="form.companyContent" type="textarea" :border="true" height="200" :auto-height="true" />
					</u-form-item>

				</view>
				<view class="title" style="display: flex;justify-content: space-between;">
					<view class="">
						股东信息（持股25%以上）
					</view>
					<view class="">
						<u-button size="mini" @click="handAddShare">添加股东</u-button>
					</view>
				</view>
				<view class="form_box">
					<u-form-item>
						<view class="info_list">
							<view class="info_title">
								<view class="info_name title">
									姓名
								</view>
								<view class="info_proportion title">
									比例
								</view>
								<view class="info_proportion title">
									类型
								</view>
								<view class="title btn">

								</view>
							</view>
							<view class="info_title" v-for="(item,index) in companyShareholder" :key='item.guid'>
								<view class="info_name title">
									<u-input :disabled="item.id!=''" v-model="item.userName" placeholder='请输入' />
								</view>
								<view class="info_proportion title">
									<u-input :disabled="item.id!=''" v-model="item.shareholding" placeholder='请输入' />
								</view>
								<view class="info_proportion title">

									<!-- <u-input /> -->
									<u-input placeholder='选择' v-model="item.identity" type="select" @click="handInfoType(index,item)" />
								</view>
								<view class="title btn">
									<u-button style="margin-right: 20rpx;" size="mini" @click="handFunAdd(item)">确定</u-button>
									<u-button size="mini" @click="handFunCom(index)">操作</u-button>
								</view>
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="form_box">
					<u-form-item label-width='auto'>
						<!-- <hyUpload :defaultUrl='form.shareholdersImg' @onSuccess='(res)=>onSuccessUpload(res,"shareholdersImg")'></hyUpload> -->
						<view class="flex_upload_tetxt">
							<hyFileUpload :defaultUrls='form.shareholdersImg' @handSuccessFilsList='(res)=>onSuccessFilsList(res,"shareholdersImg")'></hyFileUpload>
							<text>请上传股权结构图，股东列表</text>
						</view>
						
					</u-form-item>
				</view>
				<formList ref='director'></formList>
				<view class="title">
					其他相关资料
				</view>
				<view class="form_box">
					<u-form-item label-width='auto'>
						<view class="upload_box">
							<view class="upload_item">
								<!-- <hyUpload :defaultUrl='form.otherImg' @onSuccess='(res)=>onSuccessUpload(res,"otherImg")'></hyUpload> -->
								<view class="flex_upload_tetxt">
									<hyFileUpload :defaultUrls='form.otherImg' @handSuccessFilsList='(res)=>onSuccessFilsList(res,"otherImg")'></hyFileUpload>
									<text>请上传</text>
								</view>
							</view>
						</view>
					</u-form-item>
				</view>
			</u-form>
		</view>
		<u-action-sheet :list="actionSheetList" v-model="isMainland" @click="actionCallback"></u-action-sheet>
		<u-action-sheet :list="btnsList" v-model="isBtns" @click="btnsClick"></u-action-sheet>
		<view class="submit">
			<u-button @click="submit" type="success">提交</u-button>
		</view>
	</view>
</template>

<script>
	import hyUpload from '@/components/hy-upload/hy-upload.vue'
	import formList from './components/list.vue'
	import hyFileUpload from '@/components/hy-file-upload/hy-file-upload.vue'
	export default {
		components: {
			hyUpload,
			formList,
			hyFileUpload
		},

		data() {
			return {
				companyShareholder: [{
					companyId: '', //公司资料单ID ,
					guid: this.$u.guid(),
					id: '',
					identity: '', //身份 1大陆 2非大陆 ,
					shareholding: '', //持股比例 ,
					userName: '', //股东姓名
				}],
				share: {},
				isMainland: false,
				isBtns: false,
				btnsList: [{
						text: '完善信息',
						id: 2
					},
					{
						text: '删除',
						id: 3,
						color: 'red',
					},
				],
				shareIndex: '',
				actionSheetList: [{
						text: '大陆',
						id: 1
					},
					{
						text: '非大陆',
						id: 2
					}
				],
				form: {
					addressImg: '', //地址证明 ,
					businessImg: '', //营业执照 ,
					businessNum: '', //营业编号 ,
					companyAddress: '', //公司地址 ,
					companyContent: '', //公司简介 ,
					companyDirectors: [], //【'',//查询时返回字段】董事集合 ,
					companyImg: '', //公司文件 ,
					companyName: '', //公司名称 ,
					companyNum: '', //公司注册号 ,
					companyShareholders: [], //查询时返回字段】股东集合 ,
					directorNum: '', //董事数量 ,
					oddNumbers: '', //申请单编号 ,
					otherImg: '', //其他证明资料 ,
					shareholdersImg: '', //股权结构图 ,
					shareholdersNum: '', //股东数量
				},
				action: 'http://www.example.com/upload',
				fileList: [],
				rules: {
					companyName: [{
						required: true,
						message: '请输入公司名称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					businessNum: [{
						required: true,
						message: '请输入营业编号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					companyNum: [{
						required: true,
						message: '请输入公司注册号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					companyAddress: [{
						required: true,
						message: '请输入公司地址',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		async onLoad(e) {
			if (e.oddNum) {
				const oddNum = e.oddNum
				const res = await this.$u.api.findExamineOddInfo({
					oddNum
				})
				this.form = res.companyInfo
				console.log(this.form, 'form')
				// companyDirectors
				if (res.companyInfo.companyShareholders && res.companyInfo.companyShareholders.length != 0) {
					res.companyInfo.companyShareholders.forEach(item => {
						if (item.identity == 1) {
							item.identity = '大陆'
						}
						if (item.identity == 2) {
							item.identity = '非大陆'
						}
					})
				}
				if (res.companyInfo.companyDirectors && res.companyInfo.companyDirectors.length != 0) {
					res.companyInfo.companyDirectors.forEach(item => {
						if (item.identity == 1) {
							item.identity = '大陆'
						}
						if (item.identity == 2) {
							item.identity = '非大陆'
						}
					})
				}
				this.companyShareholder = res.companyInfo.companyShareholders
				this.$refs.director.CompanyDirector = res.companyInfo.companyDirectors
				console.log(res)
			}
		},
		methods: {
			//文件上传
			onSuccessFilsList(files, key) {
				const fileStr = files.map(item => item.url)
				this.form[key] = fileStr.join(',')
				//https://kycminiapp.oss-cn-beijing.aliyuncs.com/kyc/wxd952aa05300520d116126181365932e6d96f041b4cb60215e2bd7c599e3fd.jpg
			},
			//添加股东
			handAddShare() {
				let row = {
					companyId: '', //公司资料单ID ,
					guid: this.$u.guid(),
					id: '',
					identity: '', //身份 1大陆 2非大陆 ,
					shareholding: '', //持股比例 ,
					userName: '', //股东姓名
				}
				this.companyShareholder.push(row)
			},
			//操作 删除 生成股东 完善信息
			async btnsClick(index) {
				switch (index) {
					case 0: //完善信息
						if (this.share.id) {
							console.log(this.share)
							if (this.share.identity == '大陆') {
								uni.navigateTo({
									url: '/pages/company/personal/yesForm/yesForm?shareholderId=' + this.share.id +
										'&name=addCompanyShareholderInfo&detailsName=findCompanyShareholderById'
								})
							} else if (this.share.identity == '非大陆') {
								uni.navigateTo({
									url: '/pages/company/personal/noForm/noForm?shareholderId=' + this.share.id +
										'&name=addCompanyShareholderInfo&detailsName=findCompanyShareholderById'
								})
							}
						} else {
							uni.showToast({
								title: '请先生成股东',
								icon: "none"
							})
						}
						break

					case 1:
						if (this.share.id) {
							console.log(this.share.id)
							await this.$u.api.delCompanyShareholder({
								id: this.share.id
							})
							this.companyShareholder.forEach((item, index) => {
								if (item.guid == this.share.guid) {
									this.companyShareholder.splice(index, 1)
								}
							})
						} else {
							this.companyShareholder.forEach((item, index) => {
								if (item.guid == this.share.guid) {
									this.companyShareholder.splice(index, 1)
								}
							})
						}
						break
					default:
						break;
				}
			},
			//唤起操作栏
			handFunCom(index) {
				console.log(this.companyShareholder[index])
				this.share = this.$u.deepClone(this.companyShareholder[index]);
				this.isBtns = true
			},
			async handFunAdd(row) {
				this.share = this.$u.deepClone(row);
				if (this.share.id) {
					uni.showToast({
						title: '该股东已成生，请勿重复生成！！'
					})
					return
				}
				if (!this.share.userName) {
					this.isBtns = false
					uni.showToast({
						title: '请选输入持股人姓名',
						icon: 'none'
					})
					return
				}
				if (!this.share.identity) {
					this.isBtns = false
					uni.showToast({
						title: '请选择持股人类型',
						icon: 'none'
					})
					return
				}
				if (!this.share.shareholding) {
					this.isBtns = false
					uni.showToast({
						title: '请选输入持股比例',
						icon: 'none'
					})
					return
				}
				this.share.identity = this.share.identity == '大陆' ? 1 : 2
				const res = await this.$u.api.addCompanyShareholder(this.share)
				this.companyShareholder.forEach(item => {
					if (item.guid == this.share.guid) {
						item.id = res
					}
				})
				uni.showToast({
					title: '生成成功'
				})

			},
			//获取股东类别（大陆非大陆）
			handInfoType(shareIndex, row) {
				if (row.id) {
					return
				}
				this.shareIndex = shareIndex
				this.isMainland = true
			},
			actionCallback(index) {
				this.companyShareholder[this.shareIndex].identity = this.actionSheetList[index].text
			},
			onSuccessUpload(res, name) {
				this.form[name] = res.data
			},
			isUploadImg() {
				if (!this.form.companyImg) {
					uni.showToast({
						title: '请上传公司文件',
						icon: 'none'
					})
					return false
				}
				return true
			},
			async submit() {
				// addCompanyExamineOddNew
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						console.log(this.form)
						console.log('验证通过');
						let director = this.companyShareholder.map(item => {
							if (item.id) {
								return item.id
							}

						})
						let shareholder = this.$refs.director.CompanyDirector.map(item => {
							if (item.id) {
								return item.id
							}
						})
						director = director.filter(item => item)
						shareholder = shareholder.filter(item => item)
						this.form.directorNum = shareholder.length
						this.form.shareholdersNum = director.length




						let companyShareholders = []
						let companyDirectors = []
						companyShareholders = JSON.parse(JSON.stringify(this.companyShareholder))

						companyDirectors = JSON.parse(JSON.stringify(this.$refs.director.CompanyDirector))

						if (companyShareholders && companyShareholders.length != 0) {
							for (let i = 0; i < companyShareholders.length; i++) {
								let item = companyShareholders[i]
								item.identity = item.identity == '大陆' ? 1 : 2
							}
						}
						if (companyDirectors && companyDirectors.length != 0) {
							for (let i = 0; i < companyDirectors.length; i++) {
								let item = companyDirectors[i]
								item.identity = item.identity == '大陆' ? 1 : 2
							}
						}
						this.form.companyShareholders = companyShareholders
						this.form.companyDirectors = companyDirectors
						const newForm = {
							companyInfo: this.form,
							director: shareholder, //董事id集合
							shareholder: director //股东id集合
						}
						await this.$u.api.addCompanyExamineOddNew(newForm)
						uni.navigateTo({
							url: '/pages/personal/examine/examine'
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.flex_upload_tetxt {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		text-align: center;
	}

	.company {
		padding-bottom: 200rpx;

		.submit {
			z-index: 888;
			width: 100%;
			background-color: #f7f7f7;
			padding: 30rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
		}

		.info_list {
			display: flex;
			flex-direction: column;
			width: 100%;

			.info_title {
				display: flex;
				justify-content: space-between;

				.title {
					padding: 0;
				}

				.btn {
					display: flex;
					justify-content: space-between;
					padding: 0 20rpx;
					box-sizing: border-box;
				}
			}
		}

		.form_box {
			padding: 0 30rpx;
			box-sizing: border-box;
		}

		.title {
			background-color: #f7f7f7;
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
	}
</style>
